import React, { useEffect, useState} from 'react';

import '../../../styles/Booking Management/Registration.scss'
import TOp from '../../../component/Booking/Top'
import { tableb_list, del_listb, search_listb } from '../../../utils/Booking Management/api'

import { notification, Radio, DatePicker, Space, Button, message, Table, ConfigProvider } from 'antd';
import { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { MenuProps } from 'antd';
import { UserOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
interface Props {
    // title:string
}
// 表格
interface DataType {
    key: string;
    name: string;
    jnumber: string;
    snumber: string;
    phone: string;
    active: string;
    ghks: string;
    moeny: string;
    over: string;
    jday: string;
}
function Nuclein(props:Props) {
    let gengGai = {
        title:"预约核酸检测"
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '患者姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '就诊卡号',
            dataIndex: 'jnumber',
            key: 'jnumber',
        },
        {
            title: '身份证号',
            dataIndex: 'snumber',
            key: 'snumber',
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '科室',
            dataIndex: 'ghks',
            key: 'ghks',
        },
        {
            title: '检测费',
            dataIndex: 'money',
            key: 'money',
        },
        {
            title: '状态',
            dataIndex: 'over',
            key: 'over',
        },
        {
            title: '就诊日期',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '就诊时间',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '预约时间',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    <a><DeleteOutlined onClick={() => { toDel(record,) }} /></a>
                </Space>
            ),
        },
    ];

    // 下拉菜单
    const handleMenuClick: MenuProps['onClick'] = (e) => {
        message.info('Click on menu item.');
        console.log('click', e);
    };
    const items: MenuProps['items'] = [
        {
            label: '内科',
            key: '1',
            icon: <UserOutlined />,
        },
        {
            label: '外科',
            key: '2',
            icon: <UserOutlined />,
        },
        {
            label: '骨科',
            key: '3',
            icon: <UserOutlined />,
        },
    ];
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    // 时间表格
    const { RangePicker } = DatePicker;

    // 跳转路由
    let navigate = useNavigate()
    // 表单中内容描述区域
    // const {TextArea} = Input;
    // 获取列表内容
    let [data, setdata] = useState([])
    // 获取数据
    useEffect(() => {
        //解构获取的数据
        tableb_list().then(({ data }) => {
            console.log(data);
            setdata(data)
            // setdata(data=[...data])
        })
    }, [])
    // 按名字搜索
    const onSearch = (value: string) => {
        let seachkey = value
        console.log(seachkey);
        search_listb(seachkey).then((res) => {
            console.log("查询的", res.data);
            setdata(res.data);
            notification.success({ message: '查询成功！' });
        })
    }
    // 删除
    let toDel = (record: any) => {
        let id = record.id
        del_listb(id).then((res) => {
            tableb_list().then((res) => {
                setdata(res.data)
            })
            notification.success({ message: '删除成功！' })
        })
    }
    // 复选框
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

    // 分页器
    let [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 })
    // 分页
    const page = (page: TablePaginationConfig) => {}
    return (
        <div className='reg-all'>
            <TOp {...gengGai} />
            <div className='reg-minall'>
                <div className='minall-top'>
                    <div className='minall-top-left'>
                        <Radio>全部</Radio>
                        <Radio>待就诊</Radio>
                        <Radio>已就诊</Radio>
                        <Radio>已取消</Radio>
                    </div>
                    <Space direction="vertical" size={8}>
                        <RangePicker placeholder={['开始日期', '结束日期']} size='small' />
                    </Space>
                    <Button type='primary' style={{marginTop:24}}>搜索</Button>
                </div>
                <ConfigProvider>
                    <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} rowSelection={rowSelection} />
                </ConfigProvider>
            </div>
        </div>
    );
}

export default Nuclein;